_DesignPanel = function () {};
_DesignPanel.prototype.create_element = create_element;
_DesignPanel.prototype.hover = hover;
_DesignPanel.prototype.select = select;
_DesignPanel.prototype.add_element = add_element;
_DesignPanel.prototype.highlight_element = highlight_element;
_DesignPanel.prototype.insert_element = insert_element;
_DesignPanel.prototype.insert_element_block = insert_element_block;

_DesignPanel.prototype.list_state = '';
_DesignPanel.prototype.list_data = [];
_DesignPanel.prototype.list_save = '';
_DesignPanel.prototype.list_index = 0;
_DesignPanel.prototype.element_highlight = 0;
_DesignPanel.prototype.current_element = null;
_DesignPanel.prototype.element_list = null;

_ElementObject = function () {

	var id = null;
	var parent_id = null;
	var value = null;
	var position = null;
	var adjustment = null;
	var type = null;
	var align = null;
	var offset_x = null;
	var offset_y= null;
	var color = null;
};

DesignPanel = new _DesignPanel ();

function highlight_element (obj) {

	if (this.current_element) return;

	var element_block_view = document.getElementById ('ecm_element_block_view');

	if (this.element_highlight) {
		element_block_view.removeChild (this.element_highlight);
		this.element_highlight = null;
	} else {
		var element = document.getElementById (obj.getAttribute ('element_id'));
		var element_block_highlight = element.cloneNode (1);
		element_block_highlight.innerHTML = null;
		element_block_highlight.className = 'ecm_element_highlight';
		this.element_highlight = element_block_highlight;
		element_block_view.appendChild (element_block_highlight);
	}
}

function add_element (obj) {

	var element_object = new _ElementObject ();

	element_object.id = obj.form.id.value;
	element_object.element_id = obj.form.id.value;
	if (this.current_element) element_object.parent_id = this.current_element.getAttribute ('element_id');
	element_object.type = obj.form.type.value;
	element_object.position = obj.form.position.value;
	element_object.adjustment = obj.form.adjustment.value;
	element_object.width = obj.form.width.value;
	element_object.height = obj.form.height.value;
	element_object.align = obj.form.align.value;
	element_object.offset_x = obj.form.offset_x.value;
	element_object.offset_y = obj.form.offset_y.value;
	element_object.color = obj.form.color.value;
	
	this.create_element (element_object);
	this.insert_element_block (element_object);

	return false;
}

function insert_element_block (element_object) {

	var element_block = document.createElement ('div'); 

	element_block.setAttribute ('id', element_object.id);

	if (element_object.type == 'floating') {
		element_block.style.float = 'left';
	} else if (element_object.type == 'right') {
		element_block.style.position = 'absolute';
		element_block.style.right = '0px';
		if (element_object.offset_x != '') {
			element_block.style.right = element_object.offset_x;
		}
	} else if (element_object.type == 'left') {
		element_block.style.position = 'absolute';
		element_block.style.left = '0px';
		if (element_object.offset_x != '') {
			element_block.style.left = element_object.offset_x;
		}
	}

	if (element_object.align == 'top') {
		//element_block.style.position = 'absolute';
		//element_block.style.top = '0px';
		if (element_object.offset_y != '') {
			element_block.style.top = element_object.offset_y;
		}
	} else if (element_object.align == 'bottom') {
		//element_block.style.position = 'absolute';
		//element_block.style.bottom = '0px';
		if (element_object.offset_y != '') {
			element_block.style.bottom = element_object.offset_y;
		}
	} /* else if (element_object.offset_x != '') {
		element_block.style.left = element_object.offset_x;
	} else if (element_object.offset_y != '') {
		element_block.style.top = element_object.offset_y;
	} */

	/* if (element_object.position != '') {
		element_block.style.position = element_object.position;
	} */

	if (element_object.adjustment == 'proportional') {
		element_block.style.display = 'block';
		element_block.style.width = '100%';
	} else if (element_object.adjustment == 'measured') {
		element_block.style.display = 'inline';
		//element_block.style.width = element_object.width;
	}

	element_block.style.margin = '0px';
	element_block.style.padding = '0px';
	if (element_object.width != '') {
		element_block.style.width = element_object.width;
	}

	if (element_object.height != '') {
		element_block.style.height = element_object.height;
	}
	element_block.style.backgroundColor = '#aeaeae';
	//	element_block.style.position;
	if (element_object.color != '') {
		element_block.style.backgroundColor = element_object.color;
	}

	if (element_object.parent_id) {
		document.getElementById (element_object.parent_id).appendChild (element_block);
	} else {
		document.getElementById ('ecm_element_block_view').appendChild (element_block);
	}
}

function create_element (element_object) {

	var object_id = (this.current_element) ?
		this.current_element.getAttribute ('object_id') : 0;
	var parent_id;

	if (object_id == 0) {
		parent_id = 0;
		object_id = this.list_data.length+1;
	} else {
		parent_id = object_id;
		object_id = this.list_data.length+1;
	}

	this.list_data.push (
		DesignPanel.insert_element ({
			id:object_id,
			parent_id:parent_id,
			data:[
				{value:element_object.id},
				{value:element_object.type},
				{value:element_object.position},
				{value:element_object.adjustment}
			],
			element_id:element_object.element_id
		})
	);

	this.element_list.reset_tree_data (this.list_data);
}

function hover (obj, style) {

	var object_id = obj.getAttribute ('object_id');

	if (this.element_list.is_selected (object_id)) {
		obj.className = 'ecm_tl_list_row_d';
	} else {
		obj.className = style;
	}

	this.highlight_element (obj);
}

function select (obj, style) {

	var object_id = obj.getAttribute ('object_id');

	if (this.element_list.is_selected (object_id)) {
		this.current_element = null;
		this.element_list.remove_selected (object_id);
		obj.className = 'ecm_tl_list_row_c';
	} else {
		if (this.current_element) {
			this.current_element.className='';
			this.element_list.remove_selected (this.current_element.getAttribute ('object_id'), style);
		}
		this.current_element = obj;
		this.element_list.add_selected (object_id, style);
		obj.className = 'ecm_tl_list_row_d';
	}
}

function insert_element (options) {

	this.list_state += ':'+options.parent_id;

	return [options.id,options.parent_id,
		[
			{value:''},
			{value:options.data[1].value},
			{value:options.data[2].value},
			{value:options.data[3].value},
		],
		{
			item:'<span class="ecm_tl_item"></span>'+options.data[0].value,
			toggle:'<span class="{class}" id="toggle_'+options.id+'" onclick="javascript:odialog=true;DesignPanel.element_list.toggleNode('+options.id+');"></span>'+options.data[0].value,
			onmouseover:'DesignPanel.hover (this, \'{class}\');',
			onmouseout:'DesignPanel.hover (this, \'{class}\');',
			onclick:'DesignPanel.select (this, \'{class}\');',
			toggle_open:'ecm_tl_toggle_open',
			toggle_close:'ecm_tl_toggle_close',
			tree_level:'ecm_tl_level_',
			element_id:options.element_id,
			toggleid:'toggle_',
			row_a:'ecm_tl_list_row_a',
			row_b:'ecm_tl_list_row_b',
			row_c:'ecm_tl_list_row_c',
			row_d:'ecm_tl_list_row_d'
		}
	]
}

var ecm_element_list='ecm_element_list';
DesignPanel.list_data=[];
